<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true"><block slot="content">我的收藏</block></cu-custom>
		<view class="padding text-center text-gray" v-show="imagesPageInfo.records.length === 0">您还没有收藏过任何内容......</view>
		<view class="content cu-list bg-white">
			<view class="cu-item flex padding solid-bottom item-box" v-for="(item, index) in imagesPageInfo.records" :key="index" @click="toImageDetails(item.id)">
				<image :src="item.url" mode="aspectFill" class="flex-sub shadow radius margin-right-xs item-image" @click.stop="previewImage(item.url)"></image>
				<view class="action flex-twice content-box">
					<view class="text-bold nowrap">{{ item.title }}</view>
					<view class="text-sm text-gray desc-box">{{ item.description }}</view>
				</view>
			</view>
		</view>
		<view class="padding text-center text-gray" v-show="showNoMore">没有更多内容了哦......</view>
	</view>
</template>

<script>
import { checkTokenInStore } from '../../permission/index';
import { fetchImageCollections } from '../../api/http';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			imagesPageInfo: {
				current: 1,
				size: 10,
				records: [],
				total: 0
			},
			showNoMore: false
		};
	},
	computed: {
		...mapState({
			userInfo: state => state.userInfo
		})
	},
	onLoad() {
		checkTokenInStore();
		this.refreshCollectedImages();
	},
	onPullDownRefresh() {
		this.refreshCollectedImages();
		uni.stopPullDownRefresh();
	},
	onReachBottom() {
		if (this.imagesPageInfo.current * this.imagesPageInfo.size >= this.imagesPageInfo.total) {
			this.showNoMore = true;
			return;
		}
		this.fetchCollectedImages({
			page: this.imagesPageInfo.current + 1,
			limit: this.imagesPageInfo.size,
			createdBy: this.userInfo.id
		});
	},
	methods: {
		cutLongText() {
			this.imagesPageInfo.records.forEach(item => {
				if (item.description.length > 70) {
					item.description = item.description.substring(0, 72) + '...';
				}
			});
		},
		fetchCollectedImages(param) {
			fetchImageCollections(param).then(res => {
				const _info = res.data;
				this.imagesPageInfo.current = _info.current;
				this.imagesPageInfo.size = _info.size;
				this.imagesPageInfo.records = this.imagesPageInfo.records.concat(_info.records);
				this.imagesPageInfo.total = _info.total;
				this.cutLongText();
			});
		},
		refreshCollectedImages() {
			this.imagesPageInfo = {
				current: 1,
				size: 10,
				records: [],
				total: 0
			};
			this.fetchCollectedImages({
				page: this.imagesPageInfo.current,
				limit: this.imagesPageInfo.size,
				createdBy: this.userInfo.id
			});
		},
		previewImage(url) {
			uni.previewImage({
				urls: [url],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		toImageDetails(id) {
			uni.navigateTo({
				url: '../image_details/image_details?id=' + id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	.item-box {
		height: 200rpx;

		.item-image {
			height: 150rpx;
		}

		.content-box {
			width: 400rpx;
			.nowrap {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}
</style>
